`Dropdown` is set of structural components for building, accessible dropdown menus with close-on-click,
keyboard navigation, and correct focus handling. As with all the react-overlay's
components it's BYOS (Bring Your Own Styles). Dropdown is primarily
built from three base components, you should compose to build your Dropdowns.

- `Dropdown`: wraps the menu and toggle, and handles keyboard navigation
- `Dropdown.Toggle`: generally a button that triggers the menu opening
- `Dropdown.Menu`: the overlaid, menu, positioned to the toggle with PopperJS

```jsx
import {
  useDropdownMenu,
  useDropdownToggle,
  Dropdown,
} from "react-overlays";

const Menu = ({ role }) => {
  const [props, { toggle, show }] = useDropdownMenu({
    flip: true,
    offset: [0, 8],
  });
  const display = show ? "flex" : "none";
  return (
    <div
      {...props}
      role={role}
      className={`${display} w-48 py-2 flex-col shadow-lg border-gray-200 bg-white z-10 rounded`}
    >
      <button
        type="button"
        onClick={() => toggle(false)}
        className="text-left hover:bg-brand-100 px-6 py-2"
      >
        Item 1
      </button>
      <button
        type="button"
        onClick={() => toggle(false)}
        className="text-left hover:bg-brand-100 px-6 py-2"
      >
        Item 2
      </button>
    </div>
  );
};

const Toggle = ({ id, children }) => {
  const [props, { show, toggle }] = useDropdownToggle();
  return (
    <button
      type="button"
      className="btn"
      id={id}
      {...props}
    >
      {children}
    </button>
  );
};

const DropdownButton = ({
  show,
  onToggle,
  drop,
  alignEnd,
  title,
  role,
}) => (
  <Dropdown
    show={show}
    onToggle={onToggle}
    drop={drop}
    alignEnd={alignEnd}
    itemSelector="button:not(:disabled)"
  >
    <span>
      <Toggle id="example-toggle">{title}</Toggle>
      <Menu role={role} />
    </span>
  </Dropdown>
);

const ButtonToolbar = styled("div")`
  & > * + * {
    margin-left: 12px;
  }
`;

function DropdownExample() {
  const [show, setShow] = useState(false);

  return (
    <ButtonToolbar className="dropdown-example">
      <DropdownButton
        show={show}
        onToggle={(nextShow) => setShow(nextShow)}
        title={`${show ? "Close" : "Open"} Dropdown`}
      />
      <DropdownButton alignEnd title="Align right" />

      <DropdownButton drop="up" title="Drop up" />
      <DropdownButton role="menu" title="Role 'menu'" />
    </ButtonToolbar>
  );
}

<DropdownExample />;
```

## Different containers

Dropdowns use `PopperJS` by default to position Menu's to Toggles. PopperJS is a
powerful positioning library that lets you easily construct Dropdown markup to suit
your app's needs.

The example here positions the Menu to the `document` body via a Portal.

```js
import { Dropdown } from "react-overlays";

<Dropdown drop="down">
  <Dropdown.Toggle id="example-toggle">
    {(props) => (
      <button type="button" className="btn" {...props}>
        Click to open
      </button>
    )}
  </Dropdown.Toggle>
  <Dropdown.Menu offset={[0, 12]}>
    {(props, { show }) =>
      ReactDOM.createPortal(
        <div
          {...props}
          className={`${
            show ? "flex" : "hidden"
          } p-3 shadow-lg border-grey-200 bg-white z-10 rounded`}
        >
          <p>I am rendered into the document body</p>
        </div>,
        document.body
      )
    }
  </Dropdown.Menu>
</Dropdown>;
```
